<script>
import HeadCom from "@/components/headCom.vue";
import FooterCom from "@/components/footerCom.vue";

export default {
  name: "indexPage",
  components: {FooterCom, HeadCom},
  data() {
    return {
      msg:"这是index",
      flag:true,
      com:'HeadCom',
    }
  }
}
</script>
<template>
  <div>
<!--    把子组件作为标签名使用-->
    {{msg|setMsg('index')}}
    header
    <head-com></head-com>
    <button @click="flag=!flag">点击切换</button>
    <transition>
<!--      组件也可以用动画切换-->
      <head-com v-if="flag"></head-com>
      <footer-com v-else></footer-com>
    </transition>
<!--    <head-com v-if="flag"></head-com>-->
<!--    <footer-com v-else></footer-com>-->

    <component :is="com"></component>
<!--    组件之间是隔离的-->

  </div>
</template>

<style scoped lang="less">
.v-enter {
  transform: translateX(-300px);
}
.v-enter-to {
  transform: translateX(0);
}
.v-enter-active {
  transition: transform 3s;
}
.v-leave {
  transform: translateX(0px) rotate(0deg);
}
.v-leave-to {
  transform: translateX(300px) rotate(360deg);
}
.v-leave-active {
  transition: transform 4s;
}
</style>